<template>
  <u-popup :show="show" mode="bottom" round="28rpx" closeOnClickOverlay @close="cancel">
    <view class="c-popup">
      <view class="c-popup__head">
        <text>{{ title }}</text>
        <text class="iconfont icon-guanbi" @click="cancel"/>
      </view>
      <view class="c-popup__body">
        <slot></slot>
      </view>
      <view class="c-popup__foot">
        <slot name="foot">
          <view class="btn cancel-btn" v-if="showCancel" @click="cancel">取消</view>
          <view class="btn confirm-btn" @click="confirm">{{confirmText}}</view>
        </slot>
      </view>
    </view>
  </u-popup>
</template>
<script>
export default {
  name: "c-popup",
  props: {
    value: {type: Boolean, default: false},
    title: {type: String, default: ""},
    confirmText: {type: String, default: "确认"},
    showCancel: {type: Boolean, default: true}
  },
  data() {
    return {}
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit("input", value)
      }
    }
  },
  methods: {
    cancel() {
      this.$emit("cancel")
      this.show = false
    },
    confirm() {
      this.$emit("confirm")
    }
  },
  created() {
  },
  watch: {}
}
</script>

<style scoped lang="scss">
.c-popup {
  &__head {
    position: relative;
    padding: 20rpx;
    text-align: center;
    font-size: 34rpx;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      position: absolute;
      right: 24rpx;
      font-size: 60rpx;
    }
  }
  &__body {
    padding: 24rpx;
  }
  &__foot {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0 24rpx;
    .btn  {
      text-align: center;
      height: 84rpx;
      line-height: 84rpx;
      border-radius: 84rpx;
      flex: 1;
      font-size: 32rpx;
      &.cancel-btn {
        border: 1rpx solid #E5E5E5;
        color: $-color-muted;
        margin-right: 20rpx;
      }
      &.confirm-btn {
        color: #fff;
        margin-left: 20rpx;
        background: #000;
      }
    }
  }
}
</style>
